/*-----------------------------------------------------------------------------------
Template Name: Sanafi - Office Rental & Coworking Space HTML Template.
Template URI: http://rockstheme.com
Description: This is html5 template
Author: Rocks_theme
Author URI: http://rockstheme.com
Version: 1.0
-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------
CSS INDEX
===================
1. Theme Default CSS (body, link color, section etc)
2. Header Top Area
2.1 Header Bottom Area
2.2. Sticky Header Area
2.3. Mobile Menu Area
3. Slider Area
4.About Area
5. Work-space Area
6. facility area css
7. banner area css
8. Pricing area css
9. Overview Area
10. Brand Area
11.Reviews Area Css
12. Footer Area
13. Home page 02
13.1 .Location Area
13.2 . Blog Area
14. Home 03 CSS
15. Breadcumbs Area
16. FAQ Area
17. Team Area
18.Gallery Area
19. Workspace Details
20. Events Area
21. Events Details page
22. Blog Sidebar Area
23. Blog Details
24. Contact Us CSS
25. Animation CSS
-----------------------------------------------------------------------------------*/
/*----------------------------------------*/
/* Google Fonts
/*----------------------------------------*/
@import url('https://fonts.googleapis.com/css?family=Nunito:300,400,600,700,800&display=swap');
/*----------------------------------------*/
/* 1. Theme default CSS
/*----------------------------------------*/
html, body {
height: 100%;
}
.floatleft {
float:left;
}
.floatright {
float:right;
}
.alignleft {
float:left;
margin-right:15px;
margin-bottom: 15px;
}
.alignright {
float:right;
margin-left:15px;
margin-bottom: 15px;
}
.aligncenter {
display:block;
margin:0 auto 15px;
}
a:focus {
outline:0px solid;
}
img {max-width:100%;
height:auto;
}
.fix {
overflow:hidden;
}
p {
margin:0 0 15px;
color: #7e8ca0;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Nunito', sans-serif;
margin: 0 0 15px;
color: #151b2c;
font-weight: 600;
}
h1{
font-size: 48px;
line-height: 50px;
}
h2{
font-size: 38px;
line-height: 46px;
}
h3{
font-size: 30px;
line-height: 38px;
}
h4{
font-size: 24px;
line-height: 34px;
}
h5{
font-size: 20px;
line-height: 30px;
}
h6{
font-size: 16px;
line-height: 28px;
}
a {
transition: all 0.3s ease 0s;
text-decoration:none;
}
a:hover {
color: #F3B007;
text-decoration: none;
}
a:active, a:hover {
outline: 0 none;
}
a:hover, a:focus {
color: #7e8ca0;
text-decoration: none;
}
body {
background: #fff none repeat scroll 0 0;
color: #7e8ca0;
font-family: 'Nunito', sans-serif;
font-size: 15px;
text-align: left;
overflow-x: hidden;
line-height: 26px;
}
#scrollUp {
bottom: 30px;
font-size: 20px;
line-height: 48px;
right: 30px;
width: 44px;
background-color: #1FC157;
color: #fff;
text-align: center;
height: 44px;
border-radius: 3px;
-webkit-transition-duration: 500ms;
transition-duration: 500ms;
}
#scrollUp:hover {
bottom: 35px;
transition-duration: 500ms;
}
.clear{
clear:both;
}
ul{
list-style: outside none none;
margin: 0;
padding: 0;
}
input, select, textarea, input[type="text"], input[type="date"], input[type="url"], input[type="email"], input[type="password"], input[type="tel"], button, button[type="submit"] {
-moz-appearance: none;
box-shadow: none !important;
}
input:focus, textarea:focus, select:focus {
outline: none;
}
div#preloader {
position: fixed;
left: 0;
top: 0;
z-index: 99999;
width: 100%;
height: 100%;
overflow: visible;
background: #fff url('img/logo/preloader.gif') no-repeat center center;
}
.navbar-collapse {
padding-left: 0px;
}
::-moz-selection {
background: #F3B007;
text-shadow: none;
}
::selection {
background: #F3B007;
text-shadow: none;
}
.bg-color{
background:#fafafa;
}
.browserupgrade {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
.area-padding{
padding: 100px 0px;
}
.area-padding-2{
padding: 100px 0px 70px;
}
.area-padding-3{
padding: 100px 0px 50px;
}
.section-headline {
padding-bottom: 40px;
position: relative;
}
.section-headline.review-head {
padding-bottom: 20px;
}
.section-headline h3 {
font-size: 40px;
line-height: 46px;
}
.section-headline p {
font-size: 15px;
max-width: 510px;
margin: 0px auto;
}
.white-headline h3,
.white-headline p{
color:#fff;
}
.section-headline h4 .color {
color: #F3B007;
font-weight: 600;
}
.mar-row{
margin-top: 50px;
}
.color{
color:#F3B007;
}
.load-more-btn {
text-transform: uppercase;
background: #F3B007;
display: inline-block;
padding: 15px 30px;
color: #fff;
font-weight: 600;
margin-top: 30px;
border-radius: 3px;
width: 200px;
transition: 0.4s;
border:2px solid #F3B007;
}
.load-more-btn:hover{
background: #fff;
border:2px solid #F3B007;
color: #F3B007;
transition: 0.4s;
}
.text-bold {
font-weight: 800;
}
.simple-text{
font-weight: 400;
}
.big-btn {
width: 160px !important;
font-size: 18px !important;
padding: 15px 20px !important;
}
.big-btn:hover {
border: 1px solid #fff;
background: transparent;
color: #fff;
}
.color-text{
color: #F3B007
}
/*--------------------------------*/
/* 2. Header top Area
/*--------------------------------*/
.topbar-left ul li {
display: inline-block;
}
.topbar-area {
background: rgba(4,23,46, 0.70) none repeat scroll 0 0;
}
.topbar-left ul li a {
color: #ddd;
display: block;
font-weight: 600;
margin-right: 20px;
padding: 12px 0;
text-decoration: none;
font-size: 16px;
}
.topbar-left ul li a i {
color: #F3B007;
font-size: 16px;
padding-right: 7px;
}
.topbar-right {
position: relative;
display: block;
float: right;
}
.top-social {
float: left;
padding: 11px 0px;
margin-left: 10px;
}
.top-social ul li{
display: inline-block;
}
.top-social ul li a {
color: #ddd;
margin-right: 5px;
display: block;
text-align: center;
font-size: 15px;
width: 56px;
height: 26px;
border-radius: 5px;
line-height: 26px;
}
.top-social ul li a:hover{
color:#fff;
background: #F3B007;
}
.quote-button {
float: left;
}
.quote-button .quote-btn {
font-size: 16px;
font-weight: 600;
color: #fff;
background: #F3B007;
display: inline-block;
border: 1px solid #F3B007;
padding: 11px 20px;
margin: 0px;
transition: 0.4s;
}
.quote-button .quote-btn:hover {
background: #1FC157;
border: 1px solid #1FC157;
transition: 0.4s;
}
/*----------------------------------------*/
/* 2.1 Header Bottom Area
/*----------------------------------------*/
.header-one {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
z-index: 999;
}
.header-area{
background:transparent;
}
.logo {
display: block;
}
.logo a {
display: inline-block;
height: auto;
padding: 20px 0;
}
.center-bg {
display: block;
background: #fff;
padding: 0px 20px 0px 0px;
}
.main-menu ul.navbar-nav li {
float: left;
position: relative;
}
.main-menu ul.navbar-nav li a {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
color: #fff;
font-size: 16px;
font-weight: 500;
padding: 33px 18px;
text-transform: capitalize;
position: relative;
}
.main-menu ul.nav > li> a::after {
color: #fff;
content: "\e64b";
font-family: themify;
font-size: 11px;
position: absolute;
right: 2px;
top: 34px;
}
.main-menu nav ul li:hover a,
.main-menu ul.nav > li:hover a::after {
color: #F3B007;
}
.main-menu ul.nav li:nth-child(6) a:after,.main-menu ul.nav li:nth-child(1) a:after{
display:none;
}
.main-menu ul.navbar-nav li.active a:focus {
color: #fff;
}
.main-menu ul.navbar-nav li.active a {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
color: #F3B007;
position: relative;
z-index: 9999999;
}
.navbar {
border: medium none;
margin-bottom: 0;
}
.navbar-default {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
}
.main-menu ul.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
background: none;
color:#fff;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
background-color: transparent;
color: #fff;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
background: none;
}
.main-menu ul.nav li ul.sub-menu {
background: #fff;
left: 0;
opacity: 0;
position: absolute;
top: 115%;
transition: all 0.3s ease 0s;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
visibility: hidden;
width: 200px;
z-index: -99;
padding: 10px 0px;
border-radius: 3px;
}
.pagess {
position: relative;
}
.navbar.navbar-default {
float: right;
}
.main-menu ul.nav li ul.sub-menu li {
padding: 0;
position: relative;
width: 100%;
}
.main-menu ul.nav li:hover ul.sub-menu{
top:100%;
opacity:1;
z-index:999;
visibility:visible;
}
.main-menu ul.nav li ul.sub-menu li a {
color: #7e8ca0;
display: block;
font-size: 15px;
padding: 5px 20px;
}
.main-menu ul.nav li ul.sub-menu li a span{
color: #F3B007;
}
.main-menu ul.nav li a:hover,
.main-menu ul.nav li:hover ul.sub-menu li a:hover{
color:#F3B007;
}
.header-right-link {
float: right;
width: 115px;
padding: 23px 0px;
margin-left: 150px;
text-align: right;
}
.search-option {
background: #f5f5f5;
bottom: -85px;
color: #444;
display: none;
position: absolute;
right: 20px;
width: 300px;
z-index: 99999;
padding: 20px;
}
.search-option input {
background: #fff none repeat scroll 0 0;
border: medium none;
color: #444;
display: block;
float: left;
font-size: 14px;
font-style: italic;
padding: 8px 10px;
width: 214px;
height: 44px;
}
.search-option button.button {
background: #F3B007;
border: medium none;
color: #fff;
display: inline-block;
float: right;
font-size: 17px;
line-height: 35px;
padding: 5px 15px;
text-align: center;
}
.header-right-link a.main-search {
color: #fff;
display: inline-block;
float: right;
font-size: 16px;
line-height: 39px;
position: relative;
text-align: center;
width: 40px;
height: 40px;
background: #F3B007;
border-radius: 2px;
}
.header-right-link a.main-search:hover{
background: #1FC157;
}
.header-area.stick .header-right-link {
padding: 20px 0px;
}
.logo a.black-logo {
display: none;
}
/*--------------------------------*/
/* 2.2. Sticky Header Area
/*--------------------------------*/
.header-area.stick {
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 999999;
box-shadow: 0px 0px 3px #ddd, -2px -2px 3px #ddd;
background: #fff;
}
.header-area.stick .logo a {
display: inline-block;
height: auto;
padding: 17px 0;
}
.header-area.stick .main-menu ul.navbar-nav li a {
padding: 30px 18px;
color: #666;
}
.header-area.stick .main-menu ul.nav li ul.sub-menu li a {
color: #666;
display: block;
padding: 5px 15px;
}
.header-area.stick .main-menu ul.nav > li> a::after {
color: #666;
top:32px;
}
.header-area.stick .main-menu ul.nav li ul.sub-menu li a:hover{
color: #F3B007;
}
.header-area.stick .logo a.white-logo {
display: none;
}
.header-area.stick .logo a.black-logo {
display: block;
}
.header-area.stick .s-menu {
border: 1px solid #F3B007;
background: #F3B007;
color: #fff;
transition: 0.4s;
}
.header-area.stick .s-menu:hover{
border: 1px solid #F3B007;
background: #fff;
color: #F3B007;
transition: 0.4s;
}
.header-area.stick .header-center {
padding: 0px;
}
/*----------------------------------------*/
/* 2.3. Mobile Menu Area
/*----------------------------------------*/
.mobile-menu-area {
background: #fdfcfc none repeat scroll 0 0;
padding: 10px 0px ;
}
.mean-container .mean-bar::after {
content: "";
font-size: 21px;
left: 5%;
position: absolute;
top: 12px;
text-transform: uppercase;
font-weight: 500;
}
.mean-container a.meanmenu-reveal:hover {
color:#F3B007
}
.mean-container .mean-nav ul {
list-style-type: none;
margin: 20px 0px;
padding: 0;
width: 100%;
}
.mean-container .mean-nav ul li a {
background: #fdfcfc none repeat scroll 0 0;
color: #666;
display: block;
float: left;
font-size: 14px;
font-weight: 400;
margin: 0;
padding: 13px 10px;
text-align: left;
text-decoration: none;
text-transform: capitalize;
width: 90%;
}
.mean-nav ul li.mean-last {
margin-bottom: 20px;
}
.mean-container .mean-nav ul li a.mean-expand {
color: #666;
line-height: 17px;
}
.mean-container .mean-nav ul li {
width: 99.7%;
}
/*----------------------------------------*/
/* 3. Slider Area
/*----------------------------------------*/
.intro-content {
position: relative;
z-index: 1;
}
.intro-content::after {
background: rgba(4,23,46, 0.75) none repeat scroll 0 0;
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
}
.slider-content {
position: absolute;
right: 0;
text-align: left;
top: 50%;
z-index: 3;
left: 0;
margin: 0 auto;
margin-top: -135px;
}
.layer-2 p {
color: #ddd;
font-size: 19px;
letter-spacing: 0.60px;
line-height: 30px;
max-width: 700px;
}
.layer-1 h1 {
color: #fff;
font-size: 60px;
font-weight: 600;
line-height: 64px;
text-transform: uppercase;
max-width: 660px;
letter-spacing: 1px;
}
.ready-btn {
border: 1px solid #F3B007;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 16px;
font-weight: 700;
margin-top: 20px;
padding: 12px 10px;
text-align: center;
text-transform: uppercase;
transition: all 0.4s ease 0s;
z-index: 222;
background: #F3B007;
width: 160px;
border-radius: 2px;
}
.ready-btn:hover{
background: #1FC157;
border: 1px solid #1FC157;
color: #fff;
}
.intro-carousel.owl-carousel.owl-theme .owl-controls .owl-nav div.owl-prev,
.intro-carousel.owl-carousel.owl-theme .owl-controls .owl-nav div.owl-next {
color: #fff;
font-size: 24px;
margin-top: -20px;
position: absolute;
top: 50%;;
text-align: center;
line-height: 50px;
opacity: 0;
border:1px solid #fff;
width: 50px;
height: 50px;
border-radius: 3px;
}
.intro-carousel.owl-carousel.owl-theme .owl-controls .owl-nav div.owl-prev{
left: 10%;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-o-transition: 0.4s;
-ms-transition: 0.4s;
}
.intro-carousel.owl-carousel.owl-theme .owl-controls .owl-nav div.owl-next {
right: 10%;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-o-transition: 0.4s;
-ms-transition: 0.4s;
}
.intro-carousel.owl-carousel.owl-theme:hover .owl-controls .owl-nav div.owl-next{
right: 2%;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-o-transition: 0.4s;
-ms-transition: 0.4s;
opacity: 1;
}
.intro-carousel.owl-carousel.owl-theme:hover .owl-controls .owl-nav div.owl-prev{
left: 2%;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-o-transition: 0.4s;
-ms-transition: 0.4s;
opacity: 1;
}
.intro-carousel.owl-carousel.owl-theme:hover .owl-controls .owl-nav div.owl-next:hover,
.intro-carousel.owl-carousel.owl-theme:hover .owl-controls .owl-nav div.owl-prev:hover{
color:#fff;
background: #F3B007;
border: 1px solid #F3B007;
}
.intro-carousel .owl-item .layer-1{
transform: translateY(100%);
opacity: 0;
transition: all 1s ease-in-out 0.3s;
}
.intro-carousel .owl-item .layer-2{
transform: translateY(100%);
opacity: 0;
transition: all 1s ease-in-out 1s;
}
.intro-carousel .owl-item .layer-3{
transform: translateY(100%);
opacity: 0;
transition: all 1s ease-in-out 1.5s;
}
.intro-carousel .owl-item.active .layer-1,
.intro-carousel .owl-item.active .layer-2,
.intro-carousel .owl-item.active .layer-3{
transform: translateY(0);
opacity: 1;
}
.intro-carousel .owl-item.active .slider-images img{
transform: scale(1.1);
transition: 10s;
}
/*--------------------------------*/
/* 4.About Area
/*--------------------------------*/
.about-area {
position: relative;
}
.support-services {
background: #fff;
position: relative;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
z-index: 1;
padding: 40px;
overflow: hidden;
border-radius: 3px;
transition: 0.4s;
z-index: 1;
margin-bottom: 30px;
}
.support-services::after {
position: absolute;
content: "";
left: 0px;
top: 0;
width: 100%;
height: 100%;
background: rgba(31,193,87,0.96);
transition: 0.4s;
opacity: 0;
z-index: -1;
}
.support-services::before {
position: absolute;
content: "";
left: 0px;
top: 0;
width: 100%;
height: 100%;
background: url(img/about/ab2.jpg);
background-repeat: no-repeat;
background-size: cover;
transition: 0.4s;
opacity: 0;
z-index: -1;
}
.support-images {
font-size: 50px;
color: #F3B007;
line-height: 50px;
margin-bottom: 20px;
display: block;
}
.support-content h4 {
font-size: 24px;
text-transform: capitalize;
color: #151b2c;
}
.support-content p {
margin-bottom: 0px;
}
.support-services:hover::before {
transition: 0.4s;
opacity: 1;
}
.support-services:hover::after {
transition: 0.4s;
opacity: 1;
}
.support-services:hover .support-images {
transition: 0.4s;
color: #fff;
}
.support-services:hover .support-content h4, .support-services:hover .support-content p {
color: #fff;
}
.ab-btn {
border: 1px solid #F3B007;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 16px;
font-weight: 600;
margin-top: 20px;
padding: 6px 15px;
text-align: center;
transition: all 0.4s ease 0s;
z-index: 3;
background: #F3B007;
border-radius: 2px;
}
.ab-btn:hover{
color: #333;
border: 1px solid #fff;
transition: all 0.4s ease 0s;
background:#fff;
}
/*--------------------------------*/
/* 5. Work-space Area
/*--------------------------------*/
.single-system {
display: flex;
overflow: hidden;
align-items: center;
margin-bottom: 30px;
}
.main-icon-images {
display: block;
width: 80px;
height: 80px;
margin-bottom: 15px;
}
.top-content {
float: left;
width: 60%;
}
.system-images{
position: relative;
}
.system-content {
padding: 30px;
position: relative;
left: 0px;
z-index: 1;
background: #f5f5f5;
max-height: 390px;
height: 100%;
overflow: hidden;
width: 570px;
}
.right-system .system-content {
left: -113px;
}
.main-system {
display: block;
width: 40%;
float: left;
}
.system-content p {
font-size: 16px;
color: #444;
line-height: 26px;
}
.system-content h3 {
font-size: 28px;
margin-bottom: 10px;
line-height: 38px;
}
.system-btn {
font-size: 18px;
font-weight: 600;
color: #fff;
transition: 0.5s;
border: 1px solid #F3B007;
background: #F3B007;
display: inline-block;
padding: 10px 20px;
margin-top: 15px;
}
.system-btn:hover {
border: 1px solid #1FC157;
color:#fff;
background:#1FC157;
transition: 0.5s;
}
/*----------------------------------------*/
/* 6. facility area css
/*----------------------------------------*/
.digital-services {
width: 33.33%;
float: left;
}
.digital-wel {
text-align: center;
/*border: 1px solid #ddd;*/
padding: 15px;
}
.digital-icon {
font-size: 60px;
margin-bottom: 20px;
display: block;
line-height: 60px;
}
.digital-img img { border:1px solid #eee;}
.digital-content h4 {
font-size: 14px;
font-weight: 400;
text-transform: capitalize;
line-height: 30px;
margin-bottom: 0px;
}
/*----------------------------------------*/
/* 7. banner area css
/*----------------------------------------*/
.banner-area{
background: rgba(0, 0, 0, 0) url(img/background/bg2.jpg) no-repeat scroll top center / cover;
position: relative;
}
.banner-area:before{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
background: rgba(4,23,46, 0.90) none repeat scroll 0 0;
opacity:.8;
content:"";
}
.banner-text {
padding: 30px 10px;
margin: 0 auto;
}
.banner-text h2 {
font-size: 44px;
line-height: 54px;
color: #fff;
font-weight: 600;
text-transform: capitalize;
max-width: 790px;
margin: 0 auto 15px;
}
.hire-btn {
background: #F3B007;
border: 1px solid #F3B007;
color: #fff;
display: inline-block;
font-size: 22px;
margin-top: 15px;
padding: 12px 24px;
transition: 0.4s;
border-radius: 2px;
font-weight: 600;
}
.hire-btn:hover{
background: #1FC157;
color: #fff;
transition: 0.4s;
border: 1px solid #1FC157;
}
/*----------------------------------------*/
/* 8. Pricing area css
/*----------------------------------------*/
.pricing-area{
position: relative;
}
.table-list {
transition: all 0.4s ease 0s;
background: #fff;
border-radius: 5px;
position: relative;
overflow: hidden;
border: 1px solid #f5f5f5;
padding: 40px;
margin-bottom: 30px;
border: 1px solid #F3B007;
}
.base {
position: absolute;
right: -37px;
top: 33px;
background: #1FC157;
width: 180px;
text-align: center;
height: 30px;
line-height: 28px;
color: #fff;
transform: rotate(45deg);
}
.top-price-inner {
margin-bottom: 30px;
z-index: 1;
transition: all 0.4s ease 0s;
}
.top-price-inner h4 {
font-size: 26px;
text-transform: capitalize;
margin-bottom: 30px;
display: block;
width: 100%;
}
span.users {
color: #F3B007;
text-transform: uppercase;
font-size: 13px;
font-weight: 700;
}
span.dolar {
font-size: 24px;
margin-right: 5px;
position: relative;
top: -17px;
color: #6a7d91;
}
.prices {
font-size: 40px;
font-weight: 600;
color: #151b2c;
padding-right: 15px;
}
.table-list:hover{
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
transition: all 0.4s ease 0s;
border: 1px solid #F3B007;
}
.table-list ol li {
color: #6a7d91;
padding: 8px 0px;
position: relative;
}
.table-list li.check.cross{
position: relative;
}
.price-btn {
margin-top: 30px;
}
.price-btn a {
color: #fff;
text-transform: capitalize;
transition: all 0.4s ease 0s;
border-radius: 2px;
font-weight: 600;
font-size: 17px;
padding: 8px 26px;
background: #F3B007;
border: 1px solid #F3B007;
display: inline-block;
}
.table-list ol {
list-style: outside none none;
margin: 0;
padding: 0;
}
.price-btn a:hover {
background: #1FC157;
color: #fff;
transition: 0.4s;
border: 1px solid #1FC157;
}
.table-list ol {
margin-top: 10px ;
}
.table-list li.check::before {
content: "\e64c";
font-family: themify;
font-size: 18px;
position: absolute;
right: 0%;
top: 9px;
color: #38cb11;
font-weight: 300;
}
.table-list li.check.cross::before {
content: "\e646";
font-family: themify;
color: #FF5B5B;
}
/*--------------------------------*/
/* 9. Overview Area
/*--------------------------------*/
.overview-area{
position: relative;
}
.overview-wrapper {
margin-top: 20px;
}
.overview-wrapper h3 {
font-size: 34px;
line-height: 40px;
}
.total-count {
margin-top: 30px;
}
.single-count {
width: 47%;
float: left;
text-align: center;
padding: 40px;
}
.left-one{
margin-right: 3%;
background: #1FC157;
border: 1px solid #1FC157;
}
.right-one{
margin-left: 3%;
background: #0A27D5;
border: 1px solid #0A27D5;
}
.count-num {
font-size: 60px;
font-weight: 700;
color: #fff;
line-height: 70px;
}
.single-count h4{
color:#fff;
}
.overview-image {
position: relative;
border-radius: 5px;
}
.overview-image img{
border-radius: 5px;
}
.video-content {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: rgba(4,23,46, 0.50) none repeat scroll 0 0;
text-align: center;
border-radius: 5px;
}
.video-play.vid-zone {
background: #F3B007;
border-radius: 100%;
display: inline-block;
font-size: 34px;
height: 80px;
line-height: 80px;
width: 80px;
transition: 0.4s;
top: 50%;
position: relative;
margin-top: -40px;
}
.video-play.vid-zone i {
color: #fff;;
margin-left: 5px;
}
.video-play.vid-zone:hover {
background: #1FC157;
transition: 0.4s;
}
/*----------------------------------------*/
/* 10. Brand Area
/*----------------------------------------*/
.brand-area {
background: #051b35;
display: block;
overflow: hidden;
position: relative;
z-index: 1;
}
.brand-content h3{
margin: 0 auto;
color: #fff;
font-size: 30px;
max-width: 750px;
line-height: 36px;
font-weight: 600;
}
.brand-items {
display: block;
overflow: hidden;
padding: 0px 60px;
}
.brand-items {
padding: 0px 30px;
}
.single-brand-item {
float: left;
width: 20%;
padding: 0px 10px;
}
.single-brand-item a{
display: block;
}
.brand-btn {
border: 1px solid #FFA100;
display: inline-block;
padding: 10px 20px;
color: #fff;
font-weight: 600;
font-size: 20px;
background: #FFA100;
border-radius: 2px;
margin-top: 30px;
}
.brand-btn:hover{
background: #1FC157;
color: #fff;
transition: 0.4s;
border: 1px solid #1FC157;
}
/*----------------------------------------
11.Reviews Area Css
----------------------------------------*/
.reviews-area{
position: relative;
}
.reviews-area{
position: relative;
}
.single-testi {
margin: 0px 0px 30px;
}
.clients-text {
padding: 30px 30px;
position: relative;
background-color: #fff;
border:1px solid #ddd;
border-radius: 4px;
}
.testi-img {
position: relative;
margin-bottom: 20px;
display: block;
overflow: hidden;
}
.testi-img img {
max-width: 80px;
height: auto;
border-radius: 50px;
border: 1px solid #ccc;
float: left;
margin-right: 20px;
}
.Reviews-content {
margin-bottom: 15px;
}
.active.center .single-testi .clients-text{
border: 1px solid #1FC157;
background: #1FC157;
}
.testi-text h4 {
font-weight: 600;
text-transform: capitalize;
font-size: 20px;
margin-bottom: 0px;
}
.active.center .single-testi .testi-text p,
.active.center .single-testi .guest-rev,
.active.center .single-testi .testi-text h4{
color:#fff;
}
.guest-rev {
font-weight: 400;
}
.testi-text p {
margin-bottom: 0px;
}
.client-rating {
margin-bottom: 15px;
}
.testi-text span a{
color:#F3B007;
}
.testi-text h5 {
color: #6a7d91;
font-size: 20px;
}
.client-rating a {
display: inline-block;
color: #fec731;
font-size: 20px;
padding: 0px 5px 0px 0px;
}
.testimonial-carousel.owl-carousel.owl-theme .owl-controls .owl-dots div.owl-dot > span {
background: #7e8ca0 none repeat scroll 0 0;
display: inline-block;
height: 8px;
width: 8px;
-moz-transition:0.4s;
-webkit-transition:0.4s;
-o-transition:0.4s;
-ms-transition:0.4s;
transition:0.4s;
border-radius: 50%;
}
.testimonial-carousel.owl-carousel.owl-theme .owl-controls .owl-dots {
bottom: -20px;
display: block;
left: 50%;
margin-left: -40px;
position: absolute;
}
.testimonial-content {
margin-bottom: 15px;
}
.testimonial-carousel.owl-carousel.owl-theme .owl-controls .owl-dots div.owl-dot {
display: inline-block;
margin: 0 3px;
}
.testimonial-carousel.owl-carousel.owl-theme .owl-controls .owl-dots div.owl-dot.active span {
background: #F3B007;
width: 30px;
border-radius: 3px;
}
/*----------------------------------------*/
/* 12. Footer Area
/*----------------------------------------*/
.footer1 {
background: url(img/background/bg3.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: bottom center;
background-attachment: scroll;
position: relative;
z-index: 1;
}
.footer1::after {
background: rgba(4,23,46, 0.90) none repeat scroll 0 0;
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}
.footer-area {
padding: 90px 0;
}
.footer-logo {
margin-bottom: 20px;
}
.footer-content.logo-footer {
padding-right: 30px;
}
.footer-head h4 {
color: #fff;
font-size: 24px;
margin-bottom: 20px;
text-transform: capitalize;
font-weight: 600;
}
.footer-icons ul li {
display: inline-block;
}
.footer-icons ul li a {
color: #fff;
display: block;
font-size: 16px;
line-height: 34px;
text-align: center;
margin-right: 5px;
width: 34px;
height: 34px;
border-radius: 2px;
transition: 0.4s;
background: #F3B007;
}
.footer-icons ul li a:hover{
color: #fff;
background: #1FC157;
transition: 0.4s;
}
.footer-icons {
margin-top: 15px;
}
.footer-list {
width: 50%;
float: left;
}
.subs-feilds {
margin-top: 20px;
}
.suscribe-input {
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
width: 95%;
}
.suscribe-input input {
border: 1px solid #777;
color: #c3c5c8;
font-size: 15px;
line-height: 24px;
padding: 6px 15px;
height: 46px;
border-radius: 0;
width: 64%;
float: left;
background:transparent;
}
.suscribe-input button {
background: #F3B007;
border: none;
color: #fff;
font-size: 17px;
padding: 10px 5px;
width: 36%;
font-weight: 600;
height: 46px;
border-left: 1px solid #F3B007;
transition: 0.4s;
}
.suscribe-input button:hover{
background: #1FC157;
color: #fff;
border-left: 1px solid #1FC157;
transition: 0.4s;
}
.footer-list li a {
color: #c3c5c8;
padding: 7px 0px 7px 20px;
display: block;
position: relative;
font-weight: 500;
}
.footer-list li a:first-child{
padding-top: 0px;
}
.footer-list li a::after {
position: absolute;
content: "";
right: auto;
top: 12px;
width: 5px;
height: 5px;
background: #c3c5c8;
left: 0;
}
.footer-head p{
color:#c3c5c8;
}
.footer-contacts span{
color:#F3B007;
}
.footer-list li a:hover,
.footer-list li a:hover::after{
color: #F3B007;
}
.footer-list li a:hover::after{
background: #F3B007;
}
.footer-area-bottom {
background: #04172e none repeat scroll 0 0;
padding: 25px 0;
}
.copyright-text a:hover{
text-decoration: underline;
color:#F3B007;
}
.copyright-text a {
color: #F3B007;
}
.copyright > p {
margin-bottom: 0;
color: #f5f5f5;
}
.copyright a {
color: #f5f5f5;
}
/*----------------------------------------*/
/* 13. Home page 02
/*----------------------------------------*/
.topbar-area-2{
background: transparent;
}
.intro-area-2 .slider-content {
text-align: center;
margin-top: -100px;
}
.intro-area-2 .layer-1 h1 {
max-width: 850px;
margin: 0px auto 15px;
font-weight: 700;
}
.intro-area-2 .layer-2 p {
max-width: 700px;
margin: 0px auto 15px;
}
.work-space-area-2 .single-system {
display: block;
}
.work-space-area-2 .top-content {
float: none;
width: 100%;
}
.work-space-area-2 .single-system {
margin-bottom: 30px;
}
/*--------------------------------*/
/* 13.1 .Location Area
/*--------------------------------*/
.single-awesome-location {
overflow: hidden;
}
.location-awesome-img{
display: block;
width: 100%;
height: 100%;
position: relative;
}
.location-awesome-img > a {
display: block;
position: relative;
}
.location-dec {
display: inline-block;
}
.location-dec h4 {
color: #fff;
font-size: 24px;
margin-bottom: 10px;
}
.location-dec span {
margin-bottom: 5px;
color: #fff;
display: block;
}
.single-awesome-location:hover .location-add-actions{
top:12%;
transition: all 0.5s ease 0s;
}
.location-single {
width: 100%;
float: none;
padding: 0px 15px;
}
.location-add-actions {
display: block;
position: absolute;
transition: all 0.4s ease 0s;
z-index: 9;
padding: 30px;
left: 0px;
top: 0px;
background: rgba(4,23,46, 0.90) none repeat scroll 0 0;
width: 100%;
height: 100%;
opacity: 0;
}
.single-awesome-location:hover .location-add-actions{
top:0%;
transition: all 0.5s ease 0s;
opacity: 1;
}
.location-carousel.owl-carousel.owl-theme .owl-controls .owl-nav div.owl-prev,
.location-carousel.owl-carousel.owl-theme .owl-controls .owl-nav div.owl-next {
color: #fff;
font-size: 26px;
margin-top: -20px;
position: absolute;
top: 50%;;
text-align: center;
line-height: 64px;
opacity: 0;
border:1px solid #F3B007;
width: 60px;
height: 60px;
border-radius: 50%;
background: #F3B007;
}
.location-carousel.owl-carousel.owl-theme .owl-controls .owl-nav div.owl-prev{
left: 10%;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-o-transition: 0.4s;
-ms-transition: 0.4s;
}
.location-carousel.owl-carousel.owl-theme .owl-controls .owl-nav div.owl-next {
right: 10%;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-o-transition: 0.4s;
-ms-transition: 0.4s;
}
.location-carousel.owl-carousel.owl-theme:hover .owl-controls .owl-nav div.owl-next{
right: 2%;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-o-transition: 0.4s;
-ms-transition: 0.4s;
opacity: 1;
}
.location-carousel.owl-carousel.owl-theme:hover .owl-controls .owl-nav div.owl-prev{
left: 2%;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-o-transition: 0.4s;
-ms-transition: 0.4s;
opacity: 1;
}
.location-carousel.owl-carousel.owl-theme:hover .owl-controls .owl-nav div.owl-next:hover,
.location-carousel.owl-carousel.owl-theme:hover .owl-controls .owl-nav div.owl-prev:hover{
color:#fff;
background: #F3B007;
border: 1px solid #F3B007;
}
/*----------------------------------------*/
/* 13.2 . Blog Area
/*----------------------------------------*/
.blog-area{
position: relative;
}
.blog-image{
overflow: hidden;
display: block;
}
.blog-content {
background: #fff;
padding: 30px 20px 30px;
}
.blog-content a h4 {
font-size: 20px;
text-transform: inherit;
font-weight: 600;
color: #444;
line-height: 28px;
margin: 10px 0px;
}
.blog-meta {
display: block;
margin-bottom: 10px;
}
.blog-meta span {
font-size: 13px;
padding-right: 10px;
}
.blog-meta span i {
color: #F3B007;
}
.blog-content a h4:hover{
color:#F3B007;
}
.single-blog {
margin-bottom: 30px;
box-shadow: 1px 1px 20px #f3f3f3, -1px -1px 20px #f3f3f3;
position: relative;
}
.read-more {
color: #444;
display: inline-block;
font-weight: 700;
border-top: 1px solid #ddd;
display: block;
padding-top: 10px;
}
.blog-content p {
font-size: 15px;
margin-bottom: 0px;
}
.blog-right-column .blog-image {
overflow: hidden;
float: left;
width: 50%;
min-height: 300px;
}
.blog-right-column .image-scale img{
width: 100%;
min-height:300px;
display: block;
object-fit: cover;
}
.blog-right-column .blog-content {
background: #fff;
float: left;
height: 100%;
width: 50%;
padding: 30px 20px 10px;
min-height: 300px;
}
.blog-right-column .single-blog{
overflow: hidden;
}
.footer2{
background: #04172E;
}
.footer2 .footer-area-bottom{
background: #04152a;
}
/*----------------------------------------*/
/* 14. Home 03 CSS
/*----------------------------------------*/
.header-area-3 {
background: rgba(4,23,46, 0.70) none repeat scroll 0 0;
}
.intro-area-3 .slider-content {
text-align: center;
margin-top: -90px;
}
.intro-area-3 .layer-1 h1 {
max-width: 830px;
margin: 0px auto 15px;
text-transform: capitalize;
font-weight: 400;
}
.intro-area-3 .layer-2 p {
max-width: 700px;
margin: 0px auto 15px;
}
.location-image {
float: left;
margin-right: 15px;
}
.location-address {
padding-left: 95px;
}
.location-address span {
display: block;
}
.location-address h4 {
margin-bottom: 5px;
}
.single-location {
margin-bottom: 30px;
border: 1px solid #ccc;
padding: 30px;
}
/*----------------------------------------*/
/* 15. Breadcumbs Area
/*----------------------------------------*/
.page-area {
position: relative;
z-index: 1;
}
.page-area {
background: url(img/background/bread.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.page-area::after{
position: absolute;
content: "";
left:0;
top: 0;
width:100%;
height: 100%;
background: rgba(4,23,46, 0.80) none repeat scroll 0 0;
z-index: -1;
}
.breadcrumb .section-headline {
text-align: center;
padding-bottom: 10px;
}
.page-area .section-headline::after {
display: none;
}
.breadcrumb {
background-color: transparent;
margin-bottom: 0;
padding: 230px 0px 140px;
}
.breadcrumb h3 {
color: #fff;
font-size: 42px;
font-weight: 600;
line-height: 50px;
position: relative;
margin-bottom: 0px;
}
.breadcrumb .section-headline {
text-align: center;
}
.breadcrumb ul li {
display: inline-block;
color: #f5f5f5;
padding: 0px 10px 0px 20px;
position: relative;
font-size: 16px;
}
.breadcrumb ul li.home-bread{
padding-left: 0px;
}
.breadcrumb ul li.home-bread::after {
position: absolute;
content: "\f105";
font-family: fontAwesome;
right: -10px;
top: 0;
}
.project-page-area .single-awesome-project {
margin-bottom: 30px;
}
.pages-blog .blog-content a h4 {
margin-bottom: 15px;
}
/*----------------------------------------*/
/* 16. FAQ Area
/*----------------------------------------*/
.company-faq {
display: block;
overflow: hidden;
}
.faq-details .panel-heading {
padding: 0;
}
.panel {
margin-bottom: 20px;
background-color: transparent;
border: none;
border-radius: 4px;
}
.panel-default {
border-color: #f5f5f5;
border-radius: 0 !important;
}
.panel-group .panel+.panel {
margin-top: 30px;
}
.panel-default > .panel-heading {
color: #444;
background: transparent;
}
.panel-default>.panel-heading+.panel-collapse>.panel-body {
border:none;
background: transparent;
}
.faq-details h4.check-title a {
color: #444;
display: block;
font-weight: 500;
padding: 10px 10px 10px 70px;
text-decoration: none;
background: transparent;
}
.panel-body {
padding: 15px 15px 0px 70px;
}
.panel-body p {
color: #444;
}
.faq-details h4.check-title {
color: #F3B007;
font-size: 18px;
margin-bottom: 0px;
text-transform: capitalize;
}
.faq-details .panel-heading h4 a{
position: relative;
}
.faq-details .panel-heading h4 a::before {
color: #fff;
content: "\e61a ";
font-family: themify;
font-size: 24px;
left: 0px;
line-height: 54px;
position: absolute;
text-align: center;
top: 0px;
width: 50px;
height: 100%;
background: #F3B007;
}
.faq-details .panel-heading h4 a.active::before {
color: #fff;
content: "\e622";
font-family: themify;
font-size: 24px;
left: 0px;
line-height: 46px;
position: absolute;
text-align: center;
top: 0px;
width: 50px;
height: 100%;
}
.faq-details .panel-heading h4 a.active {
color: #F3B007;
}
.faq-area .col-md-6{
padding-left: 0px;
padding-right: 0px;
}
.faq-area .faq-content {
margin-left: 80px;
padding:30px;
border-radius: 2px;
border:1px solid #F3B007;
}
.faq-area .contact-form input[type="text"], .faq-area .contact-form input[type="email"] {
border: 1px solid #ddd;
border-radius: 0;
height: 44px;
margin-bottom: 15px;
padding-left: 20px;
width: 100%;
background: transparent;
color: #444;
}
.faq-content h4{
color:#444;
padding-bottom: 20px;
}
.faq-area .faq-content .contact-form textarea#message {
height: 135px;
background: transparent;
color: #444;
border: 1px solid #ddd;
border-radius: 0;
}
.faq-area .quote-btn {
font-weight: 600;
color: #fff;
background: #F3B007;
display: inline-block;
border: 1px solid #F3B007;
padding: 10px 20px;
width: 134px;
text-transform: capitalize;
border-radius: 3px;
transition: 0.4s;
margin-top: 10px;
font-size: 18px;
}
.faq-area .quote-btn:hover{
background: #1FC157;
border: 1px solid #1FC157;
color: #fff;
transition: 0.4s;
}
/*----------------------------------------*/
/* 17. Team Area
/*----------------------------------------*/
.team-area {
background: #fff;
}
.single-member{
margin-bottom: 30px;
border: 1px solid #f2f2f2;
padding: 30px 20px;
}
.single-member .team-img {
display: inline-block;
position: relative;
overflow: hidden;
max-height: 230px;
max-width: 230px;
width: 100%;
height: 100%;
border-radius: 50%;
}
.team-hover li {
display: inline-block;
margin-right: 5px;
}
.team-hover li a {
color: #fff;
border: 1px solid #F3B007;
background: #F3B007;
display: block;
width: 34px;
height: 34px;
line-height: 32px;
border-radius:50%;
}
.team-hover li a:hover {
color: #fff;
border: 1px solid #1FC157;
background: #1FC157;
}
.team-hover {
padding: 15px 0 0px;
text-align: center;
transition: all 0.4s ease 0s;
}
.single-member .team-img a {
display: block;
}
.team-content {
padding: 10px 0px 0px;
}
.team-content h5 a {
color: #666;
}
.team-content p {
margin-bottom: 0;
}
.team-content h5 {
font-size: 18px;
margin: 10px 0px;
text-transform: capitalize;
font-weight: 600;
}
/*--------------------------------*/
/* 18.Gallery Area
/*--------------------------------*/
.gallery-area{
position: relative;
}
.single-awesome-project {
overflow: hidden;
margin-bottom: 30px;
}
.awesome-img{
display: block;
width: 100%;
height: 100%;
position: relative;
}
.awesome-img::after{
position: absolute;
left:0;
top:0;
background: rgba(4,23,46, 0.90) none repeat scroll 0 0;
content: "";
width: 100%;
height: 100%;
opacity: 0;
transition: 0.5s;
}
.awesome-img img {
transform: scale(1);
transition: 0.5s;
}
.single-awesome-project:hover .awesome-img img {
transform: scale(1.1);
transition: 0.5s;
}
.awesome-img > a {
display: block;
position: relative;
}
.awesome-img > a::before {
position: absolute;
content: "\e611";
font-family: themify;
left: 0;
top: 50%;
color: #fff;
z-index: 9;
right: 0;
margin-top: -25px;
text-align: center;
font-size: 50px;
line-height: 56px;
opacity: 0;
}
.single-awesome-project:hover .awesome-img > a::before,
.single-awesome-project:hover .awesome-img::after{
opacity: 1;
transition: 0.5s;
}
/*----------------------------------------*/
/* 19. Workspace Details
/*----------------------------------------*/
.single-page-head {
margin-bottom: 30px;
}
.page-head-left {
margin-right: 30px;
}
.single-services-page p{
color: #666;
}
.top-heading p{
margin-bottom: 0px;
}
.left-menu li:first-child {
margin: 0px 0px 2px
}
.left-menu li {
display: block;
margin: 5px 0;
}
.build-img .page-img {
padding-bottom: 0;
}
.left-menu ul li.active a {
background: #F3B007 none repeat scroll 0 0;
color: #fff;
position: relative;
}
.left-menu ul li a:hover {
color: #fff;
background: #F3B007;
}
.left-menu ul li a {
background: #f9f9f9;
color: #444;
display: block;
font-size: 17px;
font-weight: 500;
padding: 14px 20px;
position: relative;
text-decoration: none;
text-transform: capitalize;
}
.left-menu ul li.active a::after,
.left-menu ul li a:hover::after {
content: "\e649";
font-family: themify;
font-size: 15px;
position: absolute;
right: 18px;
top: 15px;
}
.down-btn i {
font-size: 24px;
float: right;
}
.down-btn {
border: 1px solid #F3B007;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 17px;
font-weight: 600;
margin-bottom: 15px;
padding: 15px;
text-align: left;
text-transform: capitalize;
transition: all 0.4s ease 0s;
z-index: 222;
background: #F3B007;
width: 100%;
position: relative;
border-radius: 3px;
}
.down-btn.apli{
margin-bottom: 0px;
}
.down-btn:hover{
color:#fff;
background: #1FC157;
border: 1px solid #1FC157;
}
.service-history {
background: #f9f9f9;
padding: 30px;
margin-bottom: 30px;
border: 1px solid #1FC157;
}
.service-new h4 {
font-size: 24px;
line-height: 36px;
font-weight: 600;
}
.service-banner-top {
border: 1px solid #1FC157;
}
.side-btn {
color: #fff;
display: inline-block;
font-size: 20px;
font-weight: 700;
position: relative;
margin-top: 10px;
transition: 0.5s;
background: #F3B007;
padding: 10px 20px;
border: 1px solid #F3B007;
border-radius: 2px;
text-transform: capitalize;
}
.side-btn:hover{
color: #fff;
transition: 0.5s;
background: #1FC157;
border: 1px solid #1FC157;
}
.single-page {
overflow: hidden;
margin-bottom: 30px;
}
.page-content h3 {
font-weight: 600;
padding: 15px 0 0;
}
.single-well {
margin-top: 20px;
}
.single-page {
overflow: hidden;
}
.single-well h3 {
margin-bottom: 15px;
}
.single-well.last-part p{
margin-bottom: 0px;
}
.marker-list li {
color: #444;
padding-left: 30px;
margin: 10px 0px;
position: relative;
}
.marker-list li::after {
position: absolute;
content: "\e64c";
left: 0;
top: 3px;
font-family: themify;
color: #1FC157;
font-weight: 700;
}
.single-page-head .service-btn{
width: 100%;
margin: 20px 0px 0px 0px;
}
.single-services-page .marker-list li {
color: #444;
}
.mar-row .single-well {
margin-top: 0px;
}
/*----------------------------------------*/
/* 20. Events Area
/*----------------------------------------*/
.events-image{
overflow: hidden;
display: block;
position: relative;
}
.image-scale {
position: relative;
transform: scale(1.1);
display: block;
transition: 0.5s;
}
.image-scale::after{
position: absolute;
content: "";
background: rgba(0,46,91,0.30);
width: 100%;
height: 100%;
left:0;
top:0;
}
.events-content a h4 {
font-size: 22px;
text-transform: capitalize;
font-weight: 600;
color: #555;
line-height: 32px;
transition: 0.4s;
}
.events-meta {
position: absolute;
top: 0px;
background: #1FC157;
width: 80px;
padding:15px;
left: 0px;
text-align: center;
height: 80px;
}
.time-sidule {
background: #1FC157;
display: inline-block;
padding: 0px 10px;
font-size: 13px;
color: #fff;
border-radius: 2px;
line-height: 28px;
margin-bottom: 15px;
}
.events-meta span {
color: #fff;
}
.events-date-type {
font-size: 20px;
font-weight: 700;
}
.events-month-type {
font-size: 17px;
}
.single-events:hover .image-scale {
transform: scale(1);
transition: 0.5s;
}
.single-events:hover .image-scale::after{
background: rgba(0,46,91,0);
}
.single-events {
position: relative;
overflow: hidden;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
margin-bottom: 30px;
}
.events-content {
padding: 30px 30px;
}
.events-content a h4:hover{
color:#F3B007;
transition: 0.4s;
}
.events-btn {
display: inline-block;
font-weight: 700;
color: #555;
position: relative;
text-transform: capitalize;
font-size: 15px;
}
.events-btn::after {
position: absolute;
content: "";
left: 0;
bottom: 0px;
opacity: 0;
transition: 0.5s;
background: #F3B007;
width: 0px;
height: 1px;
}
.events-btn:hover {
color: #F3B007;
}
.events-btn:hover.events-btn::after {
width: 100%;
opacity: 1;
transition: 0.5s;
}
/*----------------------------------------
21. Events Details page
----------------------------------------*/
.events-details h3 {
font-size: 32px;
font-weight: 600;
}
.events-name ul li {
color: #555;
font-weight: 500;
font-size: 18px;
line-height: 32px;
margin: 10px 0px;
}
.events-name span {
padding-right: 15px;
min-width: 110px;
display: inline-block;
font-weight: 700;
font-size: 18px;
}
.events-single .events-inner{
margin-bottom: 0px;
}
.events-share h5 {
display: inline-block;
margin-bottom: 0px;
}
.events-social {
display: inline-block;
margin-left: 20px;
}
.events-share {
margin-top: 30px;
}
.events-share ul li {
display: inline-block;
margin-top: 10px;
}
.events-share ul li a {
color: #fff;
display: block;
font-size: 18px;
line-height: 34px;
text-align: center;
margin-right: 5px;
width: 36px;
height: 36px;
border: 1px solid #F3B007;
background: #F3B007;
border-radius: 2px;
transition: 0.4s;
}
.events-share li a:hover{
color: #fff;
background: #1FC157;
border: 1px solid #1FC157;
transition: 0.4s;
}
/*----------------------------------------*/
/* 22. Blog Sidebar Area
/*----------------------------------------*/
.blog-page-area .single-blog {
padding: 5px;
background: #fff;
}
.blog-left-content {
margin-right: 30px;
}
.blog-page-area .blog-content{
padding: 10px 15px 20px;
}
.blog-search-option input {
padding: 5px 15px;
width: 80%;
border: none;
height: 56px;
background: transparent;
}
.blog-search-option {
margin-bottom: 30px;
display: block;
background: #fff;
border: 1px solid #F3B007;
border-radius: 3px;
}
.blog-search-option button {
background: transparent;
border: none;
}
.blog-search-option button i {
line-height: 16px;
font-size: 18px;
padding: 0px 10px;
}
.blog-search-option button i:hover {
color: #F3B007;
}
.left-blog h4 {
position: relative;
color: #444;
font-size: 20px;
font-weight: 500;
margin-bottom: 5px;
padding: 15px 0px;
text-transform: capitalize;
}
.left-blog h4::after {
position: absolute;
content: "";
left: 0;
bottom: 0;
width: 70px;
height: 1px;
background: #F3B007;
}
.blog-left-content .blog-content::after{
display: none;
}
.right-side {
padding: 30px;
border: 1px solid #ddd;
}
.left-blog {
overflow: hidden;
padding-bottom: 20px;
}
.popular-tag.left-blog {
padding-bottom: 0px;
}
.blog-category li,
.left-blog li {
display: block;
position: relative;
}
.left-blog ul li a {
color: #7e8ca0;
display: inline-block;
font-size: 15px;
padding: 7px 0px 7px 25px;
text-transform: capitalize;
}
.blog-category ul {
margin-top: 12px;
}
.left-blog ul li span {
display: inline-block;
border: 1px solid #F3B007;
width: 24px;
height: 24px;
text-align: center;
border-radius: 4px;
font-size: 13px;
color: #444;
line-height: 24px;
float: right;
}
.pst-content .date-type{
font-size: 14px;
}
.blog-category ul li:after {
position: absolute;
content: "\e649";
left: 0;
top: 8px;
font-family: themify;
color: #7e8ca0;
font-size: 13px;
}
.popular-tag.left-blog ul li a:before {
display: none;
}
.recent-single-post {
display: block;
overflow: hidden;
padding: 15px 0px;
}
.recent-single-post:last-child {
border-bottom: none;
}
.post-img {
display: inline-block;
float: left;
padding-right:10px;
}
.left-blog .post-img a {
display: block;
border:1px solid #fafafa;
}
.left-blog .post-img a img {
border-radius: 4px;
}
.pst-content {
padding-left: 100px;
}
.pst-content p{
margin-bottom: 0px;
}
.pst-content p a:hover,.left-blog ul li a:hover {
color: #F3B007;
}
.blog-page-area .blog-content {
background: #f9f9f9;
}
.pst-content p a {
color: #7e8ca0;
font-size: 15px;
}
.blog-tags {
padding: 1px 0;
}
.recent-single-post img {
width: 100%;
max-width: 80px;
height: 80px;
object-fit: cover;
border-radius: 2px;
}
.left-blog li:last-child {
border-bottom: 0 ;
}
.popular-tag.left-side-tags.left-blog ul {
padding:0px;
}
.left-tags .left-side-tags ul li {
border-bottom: 0;
display: inline-block;
margin: 5px 3px;
}
.left-tags .left-side-tags ul li a {
padding: 5px 10px;
width: auto;
background: #f4f5f4;
color: #7e8ca0;
border-radius: 3px;
font-weight: 400;
font-size: 14px;
}
.left-tags .left-side-tags ul li a:hover {
color:#fff;
background:#1FC157;
}
.left-side-tags h4 {
margin-bottom: 15px;
}
.blog-side-area .blog-right-column{
margin-top: -30px;
}
.pagination {
display: inline-block;
padding-left: 0;
margin: 10px 0 0px;
border-radius: 4px;
}
.pagination>li>a,
.pagination>li>span {
position: relative;
float: left;
padding: 6px 12px;
line-height: 1.42857143;
text-decoration: none;
color: #7e8ca0;
background-color: #f4f5f5;
border: none;
margin-left: -1px;
border-radius: 2px;
}
.pagination>li {
display: inline-block;
margin: 0px 3px 0px 0px;
}
.pagination>.active>a,
.pagination>.active>span,
.pagination>.active>a:hover,
.pagination>.active>span:hover,
.pagination>.active>a:focus,
.pagination>.active>span:focus{
z-index: 3;
color: #fff;
background-color: #F3B007;
cursor: default;
border-radius: 2px;
}
.pagination>li>a:hover, .pagination>li>span:hover, .pagination>li>a:focus, .pagination>li>span:focus {
z-index: 2;
color: #fff;
background-color: #F3B007;
border-color: #F3B007;
border-radius: 2px;
}
.adver-img {
margin-top: 20px;
}
/*----------------------------------------*/
/* 23. Blog Details
/*----------------------------------------*/
.blog-details .blog-content p {
margin-bottom: 15px;
}
.comments-heading h3, h3.comment-reply-title {
border-bottom: 1px solid #ddd;
color: #444;
font-size: 18px;
margin: 0 0 40px;
padding: 0 0 5px;
text-transform: capitalize;
}
.comments-list ul li{
margin-bottom: 25px;
}
.comments-list-img{
float: left;
margin-right: 15px;
border-radius: 50%;
}
.comments-list-img img {
border-radius: 3px;
border: 1px solid #ddd;
}
.comments-content-wrap {
color: #7e8ca0;
font-size: 14px;
margin: 0 0 15px 90px;
padding: 10px;
position: relative;
}
blockquote {
padding: 40px 40px 40px 80px;
margin: 20px 0 20px;
font-size: 15px;
border-left: none;
font-style: italic;
position: relative;
background: #f5f5f5;
}
blockquote::before {
position: absolute;
top: 20px;
left: 30px;
content: "\f10d ";
font-family: fontawesome;
font-size: 34px;
color: #7e8ca0;
}
blockquote p {
font-size: 16px !important;
line-height: 28px;
margin-bottom: 0px;
}
.post-share{
display: block;
overflow: hidden;
}
.post-share h5 {
float: left;
margin-bottom: 0px;
margin-top: 10px;
}
.post-social {
float: right;
margin-left: 20px;
}
.post-share ul li {
display: inline-block;
margin-top: 10px;
}
.post-share ul li a {
color: #444;
display: block;
font-size: 18px;
line-height: 34px;
text-align: center;
margin-right: 5px;
width: 36px;
height: 36px;
border: 1px solid #f5f5f5;
background: #f5f5f5;
border-radius: 2px;
transition: 0.4s;
}
.post-share ul li a:hover{
color: #fff;
border: 1px solid #F3B007;
background: #F3B007;
transition: 0.4s;
}
.author-avatar {
display: inline-block;
float: left;
width: 10%;
}
.comments-content-wrap span b{margin-right:5px}
.comments-content-wrap span a:hover{}
span.post-time{margin-right:5px}
.comments-content-wrap p {
color: #7e8ca0;
margin-top: 10px;
}
.threaded-comments{
margin-left:50px
}
.comment-respond {
margin-top: 20px;
}
span.email-notes{
color: #7e8ca0;
display: block;
font-size: 12px;
margin-bottom: 10px;
}
.comment-respond p {
color: #7e8ca0;
margin-bottom: 5px;
}
.comment-respond input[type=text],
.comment-respond input[type=email]{
border: 1px solid #ccc;
border-radius: 0;
height: 46px;
margin-bottom: 15px;
padding: 0 0 0 10px;
width: 100%;
background: transparent;
}
.comment-respond textarea#message-box{
border: 1px solid #ccc;
border-radius: 0;
max-width: 100%;
padding: 10px;
height: 200px;
width: 100%;
background: transparent;
}
.comments-content-wrap span a {
color: #F3B007;
}
.comments-content-wrap span a:hover {
color: #F3B007;
}
.comment-respond .add-btn.contact-btn {
background: #F3B007;
color: #fff;
display: block;
font-size: 16px;
margin-top: 5px;
padding: 10px 20px;
transition: 0.4s;
border-radius: 2px;
width: auto !important;
margin-top: 20px;
border: 1px solid #F3B007;
text-transform: capitalize;
font-weight: 600;
transition: 0.5s;
}
.comment-respond .add-btn.contact-btn:hover{
background: #1FC157;
color: #fff;
border:1px solid #1FC157;
transition: 0.5s;
}
.blog-page-details .left-blog-page {
margin-top:0px;
margin-bottom:30px;
}
.single-post-comments,
.related-post{
margin-top: 30px;
}
.left-head-blog .pst-content p {
line-height: 22px;
}
.blog-details .blog-content h4 {
font-size: 22px;
line-height: 34px;
margin-top: 10px;
}
.blog-details .blog-content h5 {
font-size: 20px;
}
.blog-details .blog-content {
border: 1px solid #f5f5f5;
padding: 30px 30px;
}
.blog-details .blog-images img {
width: 100%;
height: 100%;
max-height: 450px;
object-fit: cover;
}
.blog-details .img-blog {
margin: 30px 0px;
width: 100%;
height: 100%;
max-height: 350px;
overflow: hidden;
}
.related-post-list .recent-single-post {
width: 50%;
float: left;
padding: 0px 20px 0px 0px;
}
.related-post-list .recent-single-post:last-child{
padding: 0px 0px 0px 20px;
}
/*----------------------------------------*/
/* 24. Contact Us CSS
/*----------------------------------------*/
.contact-icons {
background-color: #F3B007;
padding: 50px 20px;
}
.office-city {
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
padding: 30px 30px 10px;
margin-right: 30px;
}
.office-city h4{
margin-bottom: 30px;
font-weight: 600;
color:#444;
}
.single-icon {
margin-bottom: 30px;
}
.contact-page {
margin-top: 50px;
}
.contact-icon {
display: block;
overflow: hidden;
}
.single-icon i {
color: #fff;
float: left;
font-size: 24px;
height: 50px;
line-height: 48px;
margin-bottom: 20px;
margin-right: 20px;
text-align: center;
width: 50px;
border: 1px solid #F3B007;
background: #F3B007;
border-radius: 2px;
}
.single-icon p {
color: #444;
font-size: 15px;
line-height: 24px;
}
.contact-page-area {
background: #f1f1f1 none repeat scroll 0 0;
padding: 50px 0 70px;
}
.contact-form input[type="text"], .contact-form input[type="email"] {
border: 1px solid #ccc;
border-radius: 0;
height: 44px;
margin-bottom: 15px;
padding-left: 20px;
width: 100%;
background: transparent;
}
.contact-form textarea#message {
border: 1px solid #ccc;
border-radius: 0px;
height: 171px;
padding: 20px;
width: 100%;
background: transparent;
}
.contact-btn {
background: #F3B007;
border: 1px solid #F3B007;
color: #fff;
display: block;
font-size: 16px;
margin-top: 5px;
padding: 10px 20px;
transition: 0.4s;
border-radius: 2px;
}
.contact-btn:hover {
background: #1FC157;
border: 1px solid #1FC157 ;
color: #fff;
transition: 0.4s;
}
/*----------------------------------------*/
/* 25. Animation CSS
/*----------------------------------------*/
.last-item{
margin-bottom: 0px;
}
@-webkit-keyframes bounce {
0% {
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
}
50% {
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
100% {
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
}
}
@keyframes bounce {
0% {
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
}
50% {
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
100% {
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
}
}
/*--------------------------------*/
/* .End CSS
/*--------------------------------*/